<template>
  <div class="form-config-container">
    <a-form layout="vertical">
      <a-form-item label="问卷唯一标识">
        <a-input v-model:value="config.surveyID" disabled />
      </a-form-item>
      <a-form-item label="分类">
        <a-select ref="select" v-model:value="config.category" style="width: 120px">
          <a-select-option v-for="(item, index) in categories" :value="item.category_id" :key="index">{{ item.name
            }}</a-select-option>

        </a-select>
      </a-form-item>
      <a-form-item label="问卷标题">
        <a-input v-model:value="config.title"></a-input>
      </a-form-item>
      <a-form-item label="问卷描述">
        <a-input v-model:value="config.description"></a-input>
      </a-form-item>
      <a-form-item label="问卷总分">
        <a-input v-model:value="config.totalScore"></a-input>
      </a-form-item>
      <a-form-item label="预计开放时间">
        <a-date-picker v-model:value="config.openTime" format="YYYY-MM-DD HH:mm:ss"
          :show-time="{ defaultValue: dayjs('00:00:00', 'HH:mm:ss') }" />
      </a-form-item>
      <a-form-item label="预计截止时间">
        <a-range-picker v-model:value="config.closeTime" show-time />
      </a-form-item>
      <a-form-item label="问卷状态">
        <a-radio-group v-model:value="config.status">
          <a-radio value="open">开放</a-radio>
          <a-radio value="close">关闭</a-radio>
        </a-radio-group>
      </a-form-item>
      <a-form-item label="提交限制(超出限制将禁止提交)">
        <a-input v-model:value="config.submitLimit"></a-input>
      </a-form-item>
      <a-form-item label="表单布局">
        <a-radio-group v-model:value="data.layout" button-style="solid">
          <a-radio-button value="horizontal">水平排列</a-radio-button>
          <a-radio-button value="vertical">垂直排列</a-radio-button>
          <a-radio-button value="inline">内联</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="标签对齐方式">
        <a-radio-group v-model:value="data.labelAlign" button-style="solid">
          <a-radio-button value="left">左对齐</a-radio-button>
          <a-radio-button value="right">右对齐</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="标签布局">
        <span class="label">span</span>
        <a-input-number v-model:value="data.labelCol.span" :min="0" :max="24" />
        <span class="label">offset</span>
        <a-input-number v-model:value="data.labelCol.offset" :min="0" :max="24" />
      </a-form-item>

      <a-form-item label="组件尺寸">
        <a-radio-group v-model:value="data.size" button-style="solid">
          <a-radio-button value="large">大</a-radio-button>
          <a-radio-button value="default">默认</a-radio-button>
          <a-radio-button value="small">小</a-radio-button>
        </a-radio-group>
      </a-form-item>

      <a-form-item label="隐藏必选标记">
        <a-switch checked-children="隐藏" un-checked-children="显示" v-model:checked="data.hideRequiredMark" />
      </a-form-item>
    </a-form>
  </div>
</template>

<script lang="ts">
import type { widgetForm } from './config/antd'
import { defineComponent, ref, watch, onMounted } from 'vue'
import type { PropType } from 'vue'
import { v4 as uuidv4 } from 'uuid'
import dayjs from 'dayjs'
import axios from 'axios'
import { Message } from '@element-plus/icons-vue'
export default defineComponent({
  name: 'AntdFormConfig',
  props: {
    config: {
      type: Object as PropType<typeof widgetForm['config']>,
      required: true
    }
  },
  emits: ['update:config'],
  setup(props, context) {
    const data = ref(props.config)

    watch(data, () => context.emit('update:config', data))

    onMounted(() => {
      context.emit('update:config', {
        ...props.config
        ,
        surveyID: uuidv4()
      })
    })

    const categories: any = ref([])
    onMounted(async () => {
      const api = import.meta.env.VITE_API_BASE_URL
      // 获取分类数据
      try {
        axios.get(api + '/get_questionnaire_categories.php')
          .then(function (response) {
            // handle success
            categories.value = response.data.data
            console.log(response)
          })
          .catch(function (error) {
            // handle error
            console.log(error);
          })
          .finally(function () {
            // always executed
          });
      } catch (err) {

        Message.error('分类获取失败，原因：' + err);
      }

    })


    return {
      data,
      dayjs,
      categories
    }
  }
})
</script>
